import React, { PropsWithChildren } from "react";
import { MacScrollbar, MacScrollbarProps } from 'mac-scrollbar';
import { createStyles } from "antd-style";
import 'mac-scrollbar/dist/mac-scrollbar.css';

export interface ProAutoScrollbarsProps extends MacScrollbarProps {
  yRight?: number,	// y轴滚动条距离右侧的距离
  scrollColor?: string,
  scrollWidth?: number,
}

export const ProAutoScrollbars = React.forwardRef<HTMLElement, PropsWithChildren<ProAutoScrollbarsProps>>(({ yRight = 0, scrollColor = "#D6D4D4", scrollWidth = 4, ...props }, ref) => {
  let thumbStyle: React.CSSProperties = {};
  if (scrollColor) thumbStyle = { ...thumbStyle, background: scrollColor }
  // const { className, styles } = getStyles(scrollWidth);
  const { styles } = useStyle({ scrollWidth });

  return <MacScrollbar
    ref={ref}
    // className={`pro-auto-scroll-bars ${className}`}
    className={styles.proAutoScrollbars}
    style={{ height: "100%" }}
    trackStyle={(horizontal) => ({
      [horizontal ? 'height' : 'width']: 0,
      right: yRight,
      border: 0,
    })}
    thumbStyle={(horizontal) => ({
      [horizontal ? 'height' : 'width']: scrollWidth,
      ...thumbStyle,
    })}
    // light | dark
    skin="light"
    // 设置为 true 时，无论内容宽度如何，X 轴上的滚动条都将不可用
    suppressScrollX={false}
    // 设置为 true 时，无论内容宽度如何，Y 轴上的滚动条都将不可用
    suppressScrollY={false}
    {...props}
  />
})


const useStyle = createStyles(({ css }, { scrollWidth }: { scrollWidth: number }) => ({
  proAutoScrollbars: css`
    .ms-track.ms-y  {
      .ms-thumb{
        &:after{
          width: var(--ms-track-size, ${scrollWidth}px);
        }
      }
    }
  `,
}))
